<!-- 支付页面+ 支付方式-->
<template>
  <view class="paymentBox">
    <!-- 导航栏 -->
    <TopNavigation leftTitle="支付" rightTitle="" :inToHome="true" :ToBePaid="ToBePaid" />
    <!-- 极速问诊时候展示的医生卡片 -->
    <view v-if="true" class="w-[95%] flex" style="align-items: end; margin: 20rpx 0">
      <view class="flex w-[100%]">
        <img src="@/static/doctor.png" alt="" class="w-80" />
        <view
          class="flex"
          style="flex-direction: column; justify-content: space-between; margin-left: 15rpx"
        >
          <text style="font-size: 30rpx; font-weight: 700">极速问诊</text>
          <text style="font-size: 25rpx; color: #666666">自动分配医生</text>
        </view>
      </view>
      <text>￥{{ loginValue.zixun ? loginValue.zixun : 49 }}</text>
    </view>
    <!-- 专家问诊展示的医生页面 -->
    <view v-else>
      <text>医生卡片</text>
    </view>
    <!-- 优惠卷 -->
    <view class="w-[95%] flex" style="justify-content: space-between; margin: 30rpx 0">
      <text>优惠卷</text>
      <view class="flex" style="align-items: center">
        <text>-￥{{ 10 }}.00</text>
        <wd-icon name="arrow-right" size="22px" color="#9a9a9a" />
      </view>
    </view>
    <!-- 积分抵扣 -->
    <view class="w-[95%] flex" style="justify-content: space-between; margin: 30rpx 0">
      <text>积分抵扣</text>
      <text color="red">-￥{{ 1 }}.00</text>
    </view>
    <!-- 实支付 -->
    <view class="w-[95%] flex" style="justify-content: space-between; margin: 30rpx 0">
      <text>实支付</text>
      <text color="red">￥{{ loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1 }}.00</text>
    </view>
    <!-- 患者资料 -->
    <view class="w-[95%]" style="margin: 25rpx 0">
      <text style="font-size: 35rpx; font-weight: 700">患者资料</text>
      <view class="w-[100%] flex" style="justify-content: space-between; margin: 20rpx 0">
        <text>患者信息</text>
        <view color="#acacac" style="font-size: 30rpx">
          <text>{{ loginValue.ManagePatients[loginValue.selectPatient].name }}</text>
          <text style="margin: 0 15rpx">|</text>
          <text>{{ loginValue.ManagePatients[loginValue.selectPatient].sex }}</text>
          <text style="margin: 0 15rpx">|</text>
          <text>{{ loginValue.ManagePatients[loginValue.selectPatient].age }}岁</text>
        </view>
      </view>
    </view>
    <!-- 病情描述 -->
    <view class="w-[95%]" style="margin: 25rpx 0">
      <text style="font-size: 30rpx">病情描述</text>
      <view class="w-[100%] flex">
        <text style="margin: 20rpx 0; font-size: 25rpx">{{ loginValue.zcT[0].description }}</text>
      </view>
    </view>
    <!-- 支付栏 -->
    <view class="botBar">
      <view>
        合计：
        <text color="red">￥{{ loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1 }}</text>
      </view>
      <wd-button type="success" @click="zk">去支付</wd-button>
    </view>
    <!-- 去支付遮盖层 -->
    <wd-popup
      v-model="show"
      position="bottom"
      custom-style="height: 400px;border-radius:32rpx;"
      :close-on-click-modal="false"
    >
      <!-- 关闭按钮 -->
      <view class="w-[98%]" style="display: flex; justify-content: end; padding-top: 15rpx">
        <wd-icon name="close" size="22px" @click="handleClose"></wd-icon>
      </view>

      <!-- 遮盖层里面的内容 -->
      <view class="w-[100%]" style="display: flex; flex-direction: column; align-items: center">
        <text style="margin: 20rpx 0; font-size: 40rpx">选择支付方式</text>
        <text style="margin: 20rpx 0; font-size: 60rpx">
          ￥{{ loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1 }}.00
        </text>
        <!-- 支付方式 -->
        <view
          v-for="i in loginValue.methodData.length"
          class="w-[90%] flex"
          style="align-items: center; justify-content: space-between; margin: 30rpx 0"
          @click="loginValue.changeMethod(i - 1)"
        >
          <view class="flex" style="align-items: end">
            <img
              v-if="i == 1"
              src="@/static/wx.png"
              alt=""
              class="w-50"
              style="margin-right: 20rpx"
            />
            <img v-else src="@/static/zfb.png" alt="" class="w-50" style="margin-right: 20rpx" />
            <text>{{ loginValue.methodData[i - 1].name }}</text>
          </view>
          <wd-checkbox :modelValue="i - 1 == loginValue.method ? true : false" />
        </view>
        <!-- 立即支付按钮 -->
        <wd-button
          v-if="loginValue.method == 1"
          type="success"
          style="width: 90%; margin: 30rpx 0"
          @click="ljzf"
        >
          立即支付
        </wd-button>
        <wd-button v-else type="success" style="width: 90%; margin: 30rpx 0" @click="ljzfa">
          立即支付
        </wd-button>
      </view>
    </wd-popup>
  </view>
  <!-- 取消支付弹窗 -->
  <wd-message-box />
  <wd-toast z-999 />
</template>

<script lang="ts" setup>
import DoctorAPI from "@/api/system/doctor";
import PayAPI from "@/api/system/pay";
import TopNavigation from "@/components/TopNavigation.vue";
import { LoginPinia } from "@/store/modules/Login";
import { randomList } from "@/utils/randomList";
import { useMessage, useToast } from "wot-design-uni";
const toast = useToast();
const loginValue = LoginPinia();
const OrderNumber = randomList();
const show = ref(false);
function handleClose() {
  console.log("aa");
  confirm();
  // show.value = true;
}
function zk() {
  show.value = true;
}
//支付事件
const ljzf = async () => {
  const user = {
    ...loginValue.zcT[0],
    ...loginValue.ManagePatients[loginValue.selectPatient],
    PaymentIsDone: "咨询中",
    OrderNumber: OrderNumber,
    creatTime: CurrentTime.value,
  };
  const res = await DoctorAPI.addOrders(user);
  console.log(res);
  console.log(user);
  toast.loading({
    loadingType: "ring",
    msg: "支付中...",
  });
  const response = await PayAPI.pay({
    out_trade_no: OrderNumber,
    product_code: "FAST_INSTANT_TRADE_PAY",
    subject: "问诊费",
    total_amount: (loginValue.zixun ? loginValue.zixun - 10 - 1 : 49 - 10 - 1).toFixed(2),
  });

  // 创建一个新的 div 元素
  const div = document.createElement("div");
  div.innerHTML = response as string; // 将返回的 HTML 表单字符串插入到 div 中

  // 将 div 添加到 body 中
  document.body.appendChild(div);

  // 执行返回的脚本以提交表单
  const script = div.querySelector("script");
  if (script) {
    eval(script.innerText);
  }
};
//获取当前时间
function getCurrentDateTime(): string {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const CurrentTime = ref();
onMounted(() => {
  CurrentTime.value = getCurrentDateTime();
});

async function ljzfa() {
  const user = {
    ...loginValue.zcT[0],
    ...loginValue.ManagePatients[loginValue.selectPatient],
    PaymentIsDone: "已支付",
    OrderNumber: OrderNumber,
    creatTime: CurrentTime.value,
  };
  loginValue.addRecord(user);
  // const res = await DoctorAPI.addOrders(user);
  // console.log(res);
  console.log(loginValue.zcT[0]);
  toast.show("暂不支持微信支付");
}
// 取消支付弹窗
const message = useMessage();

function confirm() {
  message
    .confirm({
      title: "是否要取消支付",
    })
    .then(() => {
      console.log("点击了确定按钮");
      const user = {
        ...loginValue.zcT[0],
        ...loginValue.ManagePatients[loginValue.selectPatient],
        PaymentIsDone: "未支付",
        OrderNumber: OrderNumber,
        creatTime: CurrentTime.value,
      };
      loginValue.addRecord(user);
      uni.navigateTo({ url: "/pages/PendingPayment/index" });
    })
    .catch(() => {
      console.log("点击了取消按钮");
      show.value = true;
    });
}

// 点击返回首页并且添加订单状态为待支付
async function ToBePaid() {
  const user = {
    ...loginValue.zcT[0],
    ...loginValue.ManagePatients[loginValue.selectPatient],
    PaymentIsDone: "待支付",
    OrderNumber: OrderNumber,
    creatTime: CurrentTime.value,
  };
  const res = await DoctorAPI.addOrders(user);
  console.log(res);
}
</script>

<style lang="scss" scoped>
.paymentBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .botBar {
    position: fixed;
    bottom: 15rpx;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 95%;
    padding: 15rpx 0;
    background-color: #fff;
  }
}
</style>
